<template>
  <div class="chat-room" ref="chatRoom">
    <!-- S 嵌入ylNavbar -->
    <div ref="avatar" class="slot-title-avatar">
      <img
        :src="doctor?.avatar"
        alt=""
        width="40px"
        height="40px"
        style="
          border-radius: 50%;
          margin-right: 10px;
          border: 2px solid var(--color-main);
        "
      />
    </div>
    <span
      v-show="state == 0"
      ref="endChat"
      style="color: var(--color-error)"
      @click="showEndPopup"
    >
      结束问诊
    </span>
    <!-- E 嵌入ylNavbar -->
    <!-- 聊天窗口 -->
    <div class="chat-room-content" ref="chatRoomWindow">
      <!-- 患者信息 -->
      <div class="patient-info box-round margin-base shadow">
        <div class="__info">
          <van-tag type="primary">患者</van-tag>
          <!-- <van-image round :src="getConsultInfor().patient?.avatar"></van-image> -->
          <span class="__name"
            >{{ getConsultInfor().patient?.name }}&emsp;
          </span>
          <span class="__age"
            >{{ getConsultInfor().patient?.gender == 0 ? "女" : "男" }}&emsp;
          </span>
          <span class="__age"
            >{{ getConsultInfor().patient.birthday | age }}岁&emsp;
          </span>
          <span class="text-small"
            >{{ getConsultInfor().ctime | datetime }}
          </span>
        </div>
        <hr />
        <div
          :class="['_desc', ellipsis ? 'text-of-e' : '', 'text-small']"
          @click="ellipsis = !ellipsis"
        >
          <span class="text-blod">症状描述：</span>
          <span>{{ getConsultInfor().desc || "无" }}</span>
        </div>
      </div>
      <ylChatMsg
        v-for="(item, index) in msgs"
        :key="item.mid || index"
        :msg="item.msg"
        :type="item.type"
        :avatar="
          item.role == 'others' ? doctor?.avatar : $store.getters.user.avatar
        "
        :theme="item.role"
        @onImgPreview="ImagePreview({ images: [item.msg], showIndex: false })"
      />
    </div>
    <ylChatInput
      v-show="state == 0"
      @send="send"
      @onSendImg="onSendImg"
      @onSendMedHistory="onSendMedHistory"
      v-model="inptxt"
    ></ylChatInput>
    <van-action-sheet v-model="show" title="选择病史发送">
      <div class="padding-base">
        <ylEmpty v-if="reminders.length == 0"  title="暂无病史记录"/>
        <ylMedHistory
          v-for="item in reminders"
          :key="item.mid"
          :medh="item"
          @click="sendMedHistory(item)"
        >
        </ylMedHistory>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import ylChatMsg from "./ylChatMsg.vue";
import ylChatInput from "../ChatRoom/ylChatInput.vue";
export default {
  components: { ylChatMsg, ylChatInput },
  data() {
    return {
      ImagePreview,
      state: 0, //当前会话状态
      sid: null, // 当前问诊会话id
      doctor: this.$route.params.doctor || this.$route.query.doctor,
      // consultInfor: this.$route.params.consultInfor,
      inptxt: "",
      msgs: [], //this.$store.getters.getMsglist,
      ellipsis: true,
      show: false,
      reminders: [],
    };
  },
  methods: {
    getConsultInfor() {
      return this.$route.params.consultInfor;
    },
    updateRemList() {
      this.$api.user.getUserHealthInfo().then((res) => {
        this.reminders = res.data;
      });
    },
    sendMedHistory(item) {
      let Msg = {
        sid: this.sid,
        uid: this.$store.getters.user.uid,
        token: this.$store.getters.token,
        touid: this.doctor?.uid,
        time: new Date().getTime(),
        msg: JSON.stringify(item),
        type: "medh",
        role: "self", // socket传输中有点多余的属性
      };
      this.msgs.push(Msg);
      this.$io.emit("uchat", Msg);
      // 滑动到最新消息
      this.scrollTopNewMsg();
      this.show = false;
    },
    onSendMedHistory() {
      this.show = true;
    },
    onSendImg(f) {
      // console.log(f);
      if (f.code == 200) {
        let Msg = {
          sid: this.sid,
          uid: this.$store.getters.user.uid,
          token: this.$store.getters.token,
          touid: this.doctor?.uid,
          time: new Date().getTime(),
          msg: f.data,
          type: "img",
          role: "self", // socket传输中有点多余的属性
        };
        this.msgs.push(Msg);
        this.$io.emit("uchat", Msg);
        // 滑动到最新消息
        this.scrollTopNewMsg();
      } else {
        this.msgs.push({
          msg: "发送失败",
          type: "text",
          role: "system",
        });
      }
    },
    send(v) {
      if (!v.trim()) {
        console.log("请先输入文字再发送！");
        return;
      }
      let Msg = {
        sid: this.sid,
        uid: this.$store.getters.user.uid,
        token: this.$store.getters.token,
        touid: this.doctor?.uid,
        time: new Date().getTime(),
        msg: v,
        type: "text",
        role: "self", // socket传输中有点多余的属性
      };
      this.msgs.push(Msg);
      // @弃用
      // this.$store.dispatch('addMsg',Msg).then(res=>{
      //   console.log("ssss:",res)
      // });
      this.$io.emit("uchat", Msg);
      // 滑动到最新消息
      this.scrollTopNewMsg();
    },

    // 结束问诊弹出确认
    showEndPopup() {
      this.$Dialog
        .confirm({
          title: "结束问诊",
          message: `确定结束本次问诊吗?`,
        })
        .then(() => {
          // TODD 执行结束问诊
          console.log("visit-end", this.sid);
          this.$io.emit("visit-end", {
            msg: "问诊结束",
            sid: this.sid, // 问诊会话id
            endid: this.$store.getters.user.uid, // 结束发起人
            touid: this.doctor?.uid,
          });
          this.state = 1; //结束问诊
          this.msgs.push({
            time: new Date().getTime(),
            msg: "问诊结束",
            type: "text",
            role: "system",
          });
        })
        .catch(() => {});
    },
    // 滑到最新消息
    scrollTopNewMsg() {
      this.$nextTick(() => {
        let sh = this.$refs.chatRoomWindow?.scrollHeight;
        if (sh) this.$refs.chatRoom.scrollTop = sh;
      });
    },
  },
  created() {
    this.$route.meta.title = this.$route.params.title;
    // 会话信息同步
    if (this.$route.params.sinfo) {
      let { sid, state } = this.$route.params.sinfo;
      this.sid = sid;
      this.state = state;
      this.doctor = this.$route.params.doctor;
      this.consultInfor = this.$route.params.sinfo;
      console.log("会话信息同步:", this.$route.params);
    }
  },
  mounted() {
    // 挂载到navBar
    this.$route.params.slotTitle = this.$refs["avatar"];
    this.$route.params.slotTitleBefore = this.$refs["endChat"];

    // 获取历史消息
    if (this.sid) {
      this.$api.chat.details({ sid: this.sid }).then((res) => {
        console.log("details:", res);
        // @弃用
        // this.$store.dispatch('setMsgList',res.data).then(sres=>{
        //   this.msgs = sres;
        //   // console.log('sres',sres)
        // });
        this.msgs = res.data.map((v) => {
          return {
            mid: v.mid,
            sid: v.sid,
            uid: v.sender,
            touid: v.recipient,
            time: v.sendtime,
            msg: v.content,
            type: v.type,
            role: v.sender == this.$store.getters.user.uid ? "self" : "others",
          };
        });
        // 滑动到最新消息
        this.scrollTopNewMsg();
      });
    }

    // socket 服务
    if (this.sid && this.state == 0) {
      // 重连未结束的会话
      this.$io.emit("visit-reload", {
        sid: this.sid,
        uid: this.$store.getters.user.uid, // 发送者
        token: this.$store.getters.token,
        touid: this.doctor?.uid, // 接收者
        descs: this.consultInfor?.desc, // 症状描述
        type: this.consultInfor.type, // 问诊类型
      });
      console.log("重连问诊", this.sid, this.doctor?.uid);
    } else if (this.sid && this.state == 1) {
      // 已结束的问诊
    } else {
      // 开始问诊
      console.log("发起问诊", this.sid, this.state, this.doctor);
      this.$io.emit("visit-start", {
        uid: this.$store.getters.user.uid, // 发送者
        token: this.$store.getters.token,
        touid: this.doctor?.uid, // 接收者
        descs: this.consultInfor?.desc, // 症状描述
        type: this.consultInfor?.type, // 问诊类型
      });
    }

    // 问诊会话信息通知
    this.$io.on("visit-start", (msg) => {
      console.log("visit-start", msg);
      // $('.chart-box').scroll(-1);
      this.msgs.push(msg);
      switch (msg.code) {
        case 0x7a7a6572: // 会话创建成功标识
          this.sid = msg.sid;
          console.log("已获取会话id", msg.sid);
          break;
      }
    });
    // 任何一方结束问诊通知另一方
    this.$io.on("visit-end", (msg) => {
      // console.log("对方结束问诊", msg);
      // $('.chart-box').scroll(-1);
      this.state = 1; //结束问诊
      this.msgs.push({
        time: new Date().getTime(),
        msg: "问诊结束",
        type: "text",
        role: "system",
      });
    });

    // 系统通知
    this.$io.on("schat", (msg) => {
      console.log("schat", msg);
      // $('.chart-box').scroll(-1);
      this.msgs.push(msg);
      switch (msg.code) {
        case 0x7a7a6572: // 会话创建成功标识
          this.sid = msg.sid;
          break;
      }
    });

    // 私聊消息
    this.$io.on("uchat", (Msg) => {
      console.log("uchat", Msg);
      this.msgs.push(Msg);
      // 滑动到最新消息
      this.scrollTopNewMsg();

      // 如果当前窗口对方是sender 则更新本次会话的未读消息状态
      // let sender = this.
      console.log("sender", Msg.sender, this.doctor?.uid);
      if (Msg.sender == this.doctor?.uid) {
        this.$io.emit("msg-read", { sid: this.sid });
      }
    });

    this.updateRemList();
  },
};
</script>

<style lang="scss" scoped>
.chat-room {
  height: 100vh;
  overflow: scroll;

  .chat-room-content {
    padding-bottom: 20vh;
  }

  .slot-title-avatar {
    // width: 40px;
    width: auto;
    height: 40px;

    > img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .patient-info {
    position: sticky;
    top: 10px;
    z-index: 1;
    margin: var(--margin-base);
    width: auto;

    .__info {
      position: relative;
      display: flex;
      align-items: center;

      > .van-image {
        width: 14vw;
        height: 14vw;
        margin: var(--margin-sm);
      }

      .__name {
        font-weight: bold;
        margin-left: var(--margin-base);
      }

      .__age {
      }
    }

    .__desc {
      margin: var(--margin-base);
    }
  }
}

</style>